<!--
 * @Author: lixb
 * @Date: 2020-08-24 09:39:18
 * @LastEditTime: 2020-09-28 16:39:06
 * @Descripttion: 回收薪享卡
-->
<template>
  <div>
    <el-drawer
      :title="`回收${welfareName}`"
      :visible.sync="isOpenRecover"
      :direction="direction"
      :wrapper-closable="false"
      size="550px"
      :before-close="beforeClose"
    >
      <div class="recovery-wrap">
        <el-form ref="dataForm" :model="dataForm" :rules="rules" label-width="150px">
          <el-form-item label="员工姓名：" prop="name">
            <span>{{ listRow.realName }}</span>
          </el-form-item>
          <el-form-item :label="`${welfareName}可用余额：`" prop="balance">
            <span style="color: #FF3B30;font-weight: bold;font-size: 16px;">
              ￥{{ listRow.amout }}
            </span>
          </el-form-item>
          <el-form-item label="收回额度：" prop="recoverBalance">
            <el-input v-model.trim="dataForm.recoverBalance"></el-input>
          </el-form-item>
          <el-form-item label="回收原因：" prop="reason">
            <el-input
              v-model="dataForm.reason"
              maxlength="200"
              :rows="5"
              show-word-limit
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item label="收回后剩余可用：" prop="surplus">
            <span>￥{{ dataForm.surplus }}</span>
          </el-form-item>
        </el-form>
        <div class="footer-button">
          <el-button @click="beforeClose()">取消</el-button>
          <el-button type="primary" @click="submitForm('dataForm')">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { recycleBalance } from '@/api/staff';
  import { getLocalData } from '@/utils/localStore';
  import { isMoney } from '@/utils/regExpUtil';
  export default {
    components: {},
    props: {
      recoverInfo: {
        type: Object,
        required: true,
      },
      isOpenRecover: {
        type: Boolean,
        required: true,
      },
    },
    data() {
      var recoverBalanceValidator = (rule, value, callback) => {
        const Max = this.listRow.amout;
        if (value > Max) {
          callback(new Error('收回金额不能大于可用余额，请重新填写！'));
        } else if (value === '' || value == 0) {
          callback(new Error('收回金额必填,并且金额大于0！'));
        } else if (!isMoney(value)) {
          callback(new Error('请输入正确金额格式！'));
        } else {
          callback();
        }
      };
      return {
        direction: 'rtl',
        dataForm: {
          recoverBalance: '',
          reason: '',
          surplus: '',
        },
        listRow: {},
        rules: {
          recoverBalance: [
            { required: true, validator: recoverBalanceValidator, trigger: 'change' },
          ],
          reason: [{ required: true, message: '请填写回收原因！', trigger: 'change' }],
        },
      };
    },
    computed: {
      recoverBalance() {
        return this.dataForm.recoverBalance;
      },
      welfareName() {
        return getLocalData('welfareName');
      },
    },
    watch: {
      /**
       * @Author: lixb
       * @Date: 2020-08-24 13:31:39
       * @msg: 监听打开drawer的时候重置表单
       */
      isOpenRecover(newDtat) {
        if (newDtat) {
          this.$nextTick(() => {
            this.$refs['dataForm'].resetFields();
          });
        }
      },
      recoverInfo(newData) {
        this.listRow = newData;
      },
      recoverBalance(newData) {
        if (newData) {
          this.dataForm.surplus = this.listRow.amout - this.dataForm.recoverBalance;
        }
      },
    },
    methods: {
      /**
       * @Author: lixb
       * @Date: 2020-08-24 13:30:48
       * @msg: 点击右上角的×关闭
       */
      beforeClose() {
        this.$emit('closeDrawer', false);
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-24 13:31:17
       * @msg: 提交表单
       */
      submitForm(formName) {
        let params = {
          deptId: this.$store.state.user.userInfo.organId,
          recycleLimit: this.dataForm.recoverBalance,
          recycleReason: this.dataForm.reason,
          userId: this.listRow.userId,
        };
        console.log(params);
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.$alert(
              `是否确定回收<strong>${this.listRow.realName}</strong>的${this.welfareName}额度 <strong style="color: #FF3B30;">${this.dataForm.recoverBalance}</strong> 元？`,
              '提示',
              {
                dangerouslyUseHTMLString: true,
                // eslint-disable-next-line no-unused-vars
                callback: action => {
                  recycleBalance(params).then(res => {
                    if (res.status == 200) {
                      this.$message.success('提交成功');
                      this.beforeClose();
                    } else {
                      this.$message.error(res.message);
                    }
                  });
                },
              }
            );
          }
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .recovery-wrap {
    padding: 20px;
  }
</style>
